import { produce } from 'immer'
import { type FC, memo, useState } from 'react'
import classNames from 'classnames'
import { useDebounceFn, useMemoizedFn } from 'ahooks'
import { Switch } from 'antd'
import contentStyle from '../../index.module.scss'
import Slider from '../slider'
import styles from '../index.module.scss'
import { useCustomizationStore, usePersonalDetailsStore } from '@/store'
import { updateCustomization } from '@/service'

interface IndexProps {
}
const Index: FC<IndexProps> = () => {
  const { customization, updateSpacing, addCustomization } = useCustomizationStore()

  const { personalDetails } = usePersonalDetailsStore(state => state, (o, n) => {
    return o.personalDetails.id === n.personalDetails.id
  })
  const [sliders] = useState([
    { name: 'marginHorizontal', label: '水平边距' },
    { name: 'marginVerticaltop', label: '上边距' },
    { name: 'marginVerticalbottom', label: '下边距' },
  ])
  const change = (data) => {
    updateSpacing(data)
  }

  const onChange = useMemoizedFn((v, name) => {
    const data = produce(customization.spacing, (draft) => {
      if (!draft.header) {
        draft.header = {
          marginHorizontal: 0,
          marginVerticaltop: 0,
          marginVerticalbottom: 0
        }
      }
      draft.header[name] = v
    })
    change(data)
  })
  return (
    <div className={classNames(styles.spacing)}>
      <h1 className={contentStyle.subtitle} >边距设置
        <Switch size='small' style={{ marginLeft: '20px' }} value={(customization.spacing.header as any)?.showSetSpacing !== false} onChange={(e) => {
          onChange(e, 'showSetSpacing')
        }}/>
      </h1>
      {
        (customization.spacing.header as any)?.showSetSpacing !== false && sliders.map((s) => {
          return <div key={s.name} style={{ marginBottom: '10px' }}>
            <Slider value={(customization.spacing.header as any)?.[s.name]} item={s} onChange={v => onChange(v, s.name)} />
          </div>
        })
      }

    </div>
  )
}

export default memo(Index, () => {
  return true
})
